<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Travel Website</title>
    <style>
      body {
        font-family: 'Open Sans', sans-serif;
        margin: 0;
        padding: 0;
      }
      .header {
        background-color: #4CAF50;
        color: white;
        padding: 20px;
        text-align: center;
        font-size: 20px;
      }
      .nav {
        background-color: #333;
        color: white;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        position: fixed;
        top: 0;
        width: 100%;
      }
      .nav ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .nav ul li {
        padding: 5px 10px;
      }
      .nav ul li a {
        color: white;
        text-decoration: none;
      }
      .banner {
        background-image: url('first_background.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 500px;
      }
      .content {
        display: flex;
        justify-content: space-between;
        margin: 50px 100px;
        padding: 20px;
      }
      .card {
        background-color: #f2f2f2;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
        overflow: hidden;
        width: calc(33.3333% - 20px);
      }
      .card img {
        object-fit: cover;
        height: 200px;
        padding: 5px;
        width: 100%;
      }
      .card h2 {
        font-weight: 300;
        margin: 5px 0;
        text-align: center;
      }
      .card p {
        font-weight: 100;
        margin: 5px 0;
        padding: 0 10px;
        text-align: justify;
      }
      .card button {
        background-color: #4CAF50;
        border: none;
        color: white;
        cursor: pointer;
        margin: auto;
        padding: 10px 20px;
      }
      .card button:hover {
        background-color: #3e8e41;
      }
      .footer {
        background-color: #333;
        color: white;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
	
  <body>
    <header class="header">

    </header>
    <nav class="nav">
      <ul>
        <li><a href="sense.php">景点</a></li>
		<li><a href="route.php">规划</a></li>
		<li><a href="shop.php">商城</a></li>
		<li><a href="shopcar.php">购物车</a></li>
		
	  </ul>
    </nav>
    <div class="banner"></div>
    <div class="content">
      <div class="card">
        <img src="ChaoZhou.jpg" alt="ChaoZhou">
        <h2>潮州</h2>
        <p>悠久的历史和文化传承，其传统工艺美术如潮州木雕、潮绣等闻名中外</p>
        <button onClick="window.location.href = 'https://zhuanlan.zhihu.com/p/30475127'">了解</button>
      </div>
      <div class="card">
        <img src="JieYang.jpg" alt="JieYang">
        <h2>揭阳</h2>
        <p>重要的交通枢纽，是粤东地区通往珠三角地区的必经之地</p>
        <button onClick="window.location.href = 'https://zhuanlan.zhihu.com/p/94435395'">了解</button>
      </div>
      <div class="card">
        <img src="ShanTou.jpg" alt="ShanTou">
        <h2>汕头</h2>
        <p>拥有得天独厚的地理位置，是连接海内外的重要门户</p>
        <button onClick="window.location.href = 'https://www.zhihu.com/question/457098151'">了解</button>
      </div>
    </div>
    <footer class="footer">
      <p>旅游规划 &copy; 2023</p>
    </footer>
  </body>
</html>
